<template>
    <el-card class="box-card">
        <el-button type="primary">添加用户</el-button>

    </el-card>
    <el-card class="box-card" style="margin-top:20px">
        <el-table :data="tableData" border>
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="roleId.rname" label="身份" />
            <el-table-column label="操作" v-slot="{ row }">
                <el-button type="danger">删除</el-button>
                <el-button type="primary">锁定</el-button>
            </el-table-column>
        </el-table>

    </el-card>
</template>

<script setup>
import { onMounted, ref } from "vue"
import api from "../../utils/request"
import { ElMessage, ElMessageBox } from 'element-plus'
const tableData = ref([])


onMounted(() => {
    getData()
})

const getData = async () => {
    let result = await api.get("/js/user")
    tableData.value = result.data.data

}


</script>

<style lang="less" scoped>
.box-card {
    width: 90%;
}
</style>